<template>
  <nav>二手物品交易所</nav>
  <main>
    <RouterView />
  </main>

  <!-- 导航栏 -->
  <van-tabbar v-model="active">
    <van-tabbar-item to="/sell" icon="shop-o">卖闲置</van-tabbar-item>
    <van-tabbar-item to="/buy" icon="cart-o">买闲置</van-tabbar-item>
    <van-tabbar-item to="/profile" icon="user-o">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { onMounted, ref } from "vue";

const active = ref(0);

export default {
  name: 'App',
  setup() {
    onMounted(() => {
      console.log(`The component is now mounted.`);
    })
    return {
      active
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 32px;
  background-image: url('./assets/lan.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center;
}
nav {
  text-align: center;
  color: #4548E6;
  font-size: 28px; 
  font-weight: 600; 
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 
}
</style>